<template>
  <div
    class="message-container pos-rel flex-box flex-top flex-start"
    :class="{
      'flex-row-reverse': message.role === 'user',
      'flex-end': message.role === 'user',
    }"
  >
    <div class="avatar">
      <img
        v-if="message.role === 'user'"
        src="../assets/images/img_me_head@2x.png"
      />
      <img v-else src="../assets/images/mine_def_touxiang_3x.png" />
    </div>
    <div class="message-content">
      <vue-markdown class="role-badge" :source="message.content"></vue-markdown>

      <div class="timestamp">{{ message.timestamp }}</div>
    </div>
    <slot :data="message"></slot>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";

export default {
  name: "Message",
  components: {
    VueMarkdown,
  },
  props: {
    message: {
      type: Object,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.message-container {
  padding: 8px;

  .avatar {
    margin: 0 20px;

    img {
      width: 44px;
      height: 44px;
      margin: 0;
      border-radius: 50%;
    }
  }
}

.message-content {
  overflow-x: auto;
  width: calc(100% - 168px);
}

.role-badge {
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #e3f2fd;
}

.timestamp {
  font-size: 0.75em;
  color: #666;
}
</style>
